import { useState } from "react";
import styles from "./Index.module.css";
import Mynao from "../../components/Mynao/Index";
import { FileOutline } from "antd-mobile-icons";
import { Avatar, Button } from "antd-mobile";

/**
 * 医生列表页面组件
 * 功能：展示医生列表，支持按日期筛选医生
 */
function Index() {
  // 医生数据按日期分组
  const dataday: Record<string, Array<{name: string, title: string, department: string, remaining: number, zt: string}>> = {
    今日: [
      {
        name: "刘医生",
        title: "主任医师",
        department: "门诊外一科",
        remaining: 20,
        zt:'余20号'
      },
      {
        name: "杨医生",
        title: "副主任医师",
        department: "门诊外一科",
        remaining: 10,
        zt:'余10号'
      },
      {
        name: "刘医生",
        title: "副主任医师",
        department: "门诊外一科",
        remaining: 20,
        zt:'余30号'
      },
      {
        name: "章医生",
        title: "主任医师",
        department: "门诊外一科",
        remaining: 30,
        zt:'已约满'
      },
    ],
    "29": [
      {
        name: "刘医生",
        title: "主任医师",
        department: "门诊外一科",
        remaining: 20,
        zt:'余20号'
      },
      {
        name: "杨医生",
        title: "副主任医师",
        department: "门诊外一科",
        remaining: 10,
        zt:'余20号'
      },
    ],
    "30": [
      {
        name: "刘医生",
        title: "主任医师",
        department: "门诊外一科",
        remaining: 20,
        zt:'余20号'
      },
      {
        name: "章医生",
        title: "主任医师",
        department: "门诊外一科",
        remaining: 30,
        zt:'已约满'
      },
    ],
  };

  // 状态管理
  const [selectedDate, setSelectedDate] = useState('今日'); // 当前选中的日期
  const [currentDoctors, setCurrentDoctors] = useState(dataday['今日']); // 当前显示的医生列表

  // 处理日期点击事件
  const handleDateClick = (date: string) => {
    setSelectedDate(date); // 更新选中的日期状态
    setCurrentDoctors(dataday[date] || []); // 根据选中日期更新医生列表
  };

  return (
    <div className={styles.yiz}>
      <div className={styles.nav}>
        <Mynao title="医生列表" />
      </div>

      <div className={styles.biao}>
        <div className={styles.wen}>门外诊一科</div>
        <div>
          <FileOutline />
          <span
            style={{
              marginLeft: "10px",
              fontWeight: "bold",
              marginRight: "9px",
            }}
          >
            2020年1月
          </span>
        </div>
      </div>

      {/* 日期选择区域 - 支持点击切换 */}
      <div className={styles.day}>
        {/* 全部日期选项 */}
        <div 
          className={`${styles.d1} ${selectedDate === '全部日期' ? styles.active : ''}`}
          onClick={() => handleDateClick('全部日期')}
        >
          全部日期
        </div>
        {/* 今日选项 */}
        <div 
          className={`${styles.d2} ${selectedDate === '今日' ? styles.active : ''}`}
          onClick={() => handleDateClick('今日')}
        >
          <div>周一</div>
          <div style={{ marginTop: "4px" }}>今日</div>
        </div>
        {/* 29日选项 */}
        <div 
          className={`${styles.d2} ${selectedDate === '29' ? styles.active : ''}`}
          onClick={() => handleDateClick('29')}
        >
          <div>周二</div>
          <div style={{ marginTop: "4px", marginLeft: "6px" }}>29</div>
        </div>
        {/* 30日选项 */}
        <div 
          className={`${styles.d2} ${selectedDate === '30' ? styles.active : ''}`}
          onClick={() => handleDateClick('30')}
        >
          <div>周三</div>
          <div style={{ marginTop: "4px", marginLeft: "6px" }}>30</div>
        </div>
        {/* 31日选项 */}
        <div 
          className={`${styles.d2} ${selectedDate === '31' ? styles.active : ''}`}
          onClick={() => handleDateClick('31')}
        >
          <div>周四</div>
          <div style={{ marginTop: "4px", marginLeft: "6px" }}>31</div>
        </div>
        {/* 1日选项 */}
        <div 
          className={`${styles.d2} ${selectedDate === '1' ? styles.active : ''}`}
          onClick={() => handleDateClick('1')}
        >
          <div>周五</div>
          <div style={{ marginTop: "4px", marginLeft: "6px" }}>1</div>
        </div>
      </div>

      {/* 医生列表区域 - 根据选中日期动态显示医生 */}
      <div className={styles.list}>
        {/* 遍历当前日期的医生列表 */}
        {currentDoctors.map((doctor, index) => (
          <div 
            key={index} 
            className={styles.fang1} 
            style={{ marginTop: index > 0 ? "20px" : "0" }}
          >
            {/* 医生头像区域 */}
            <div>
              <Avatar className={styles.tou} src={""} />
            </div>

            {/* 医生信息区域 */}
            <div className={styles.doctorInfo}>
              {/* 医生姓名和职称 */}
              <div
                style={{
                  fontWeight: "bold",
                  marginTop: "10px",
                }}
              >
                {doctor.name}
                <span style={{ color: "gray", marginLeft: "10px" }}>
                  {doctor.title}
                </span>
              </div>
              {/* 医生科室 */}
              <div style={{ marginTop: "7px" }}>
                {doctor.department}
              </div>

              {/* 医生擅长 */}
              <div style={{ marginTop: "10px", color: "gray" }}>
                擅长:擅长小儿外科常见疾病的诊断与治疗
              </div>
            </div>

            {/* 按钮区域 - 固定宽度对齐 */}
            <div className={styles.buttonWrapper}>
              <Button 
                size="mini" 
                color={doctor.zt === '已约满' ? 'danger' : 'primary'}
                style={doctor.zt === '已约满' ? { backgroundColor: 'red' } : {}}
                block // 让按钮填充容器宽度
              >
                {doctor.zt}
              </Button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default Index;
